import { BrowserRouter as Router, Routes, Route, Link, Navigate } from 'react-router-dom';
import './App.css';

// Import Components
import DatasetsList from './components/DatasetsList';
import CreateDataset from './components/CreateDataset';
import UploadDocument from './components/UploadDocument';
import RetrievalTest from './components/RetrievalTest'; // Import the actual RetrievalTest component

const Home = () => (
  <div>
    <h1>知识库与RAG独立服务</h1>
    <p>欢迎使用本服务。请通过导航访问各项功能。</p>
    <nav>
      <ul>
        <li><Link to="/datasets">管理知识库</Link></li>
        <li><Link to="/test-retrieval">测试检索功能</Link></li> {/* Added link to general retrieval test page */}
      </ul>
    </nav>
  </div>
);

// Updated to use the actual RetrievalTest component
const RetrievalTestPage = () => {
  // The RetrievalTest component itself handles dataset selection internally
  // So, no need to pass datasetId as a prop here if it's designed that way.
  // If RetrievalTest was designed to test a *specific* dataset passed via prop, 
  // then you would use useParams here: const { datasetId } = useParams();
  return (
    <div>
      {/* The RetrievalTest component will render the full UI for testing */}
      <RetrievalTest /> 
    </div>
  );
};

function App() {
  return (
    <Router>
      <div className="container">
        <header>
          <Link to="/" className="logo">知识库 RAG 服务</Link>
          <nav>
            <ul>
              <li>
                <Link to="/datasets">知识库管理</Link>
              </li>
              <li>
                <Link to="/test-retrieval">检索测试</Link> {/* Added link in header */}
              </li>
            </ul>
          </nav>
        </header>

        <main>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/datasets" element={<DatasetsList />} />
            <Route path="/datasets/new" element={<CreateDataset />} />
            <Route path="/datasets/:datasetId/upload" element={<UploadDocument />} />
            {/* Route for the general retrieval testing page */}
            <Route path="/test-retrieval" element={<RetrievalTestPage />} /> 
            {/* Optional: If you still want a dataset-specific context for retrieval testing, 
                you could have a route like /datasets/:datasetId/retrieve 
                and adapt RetrievalTest or RetrievalTestPage to use the datasetId. 
                For now, using a general test page as RetrievalTest fetches all datasets. */}
            <Route path="*" element={<Navigate to="/" replace />} />
          </Routes>
        </main>

        <footer>
          <p>&copy; 2025 独立知识库RAG服务</p>
        </footer>
      </div>
    </Router>
  );
}

export default App;

